import React, { useEffect, useState } from 'react';
import lei1 from '@/config/img/lei1.jpg';
import lei2 from '@/config/img/lei2.jpg';
import lei3 from '@/config/img/lei3.jpg';
import lei4 from '@/config/img/lei4.jpg';
import peoOne from '@/config/img/peoOne.png';
import banner from '@/config/img/banner3.png';
import guashuai from '@/config/img/guashuai.jpg';
import xueyan from '@/config/img/xuexian.jpg';
import { useHistory } from 'umi';
import './index.less';
import Title from '../component/Title';
import { CSSTransition } from 'react-transition-group';

export default function index(props: any) {
  const [isVisible, setIsVisible] = useState(false);

  const history = useHistory();
  const storyList = [
    {
      src: lei1,
      title: '雷州义盗-歌女案',
      details: '这是一个打抱不平，行侠仗义的故事',
      id: '1',
    },
    {
      src: lei2,
      title: '雷州义盗-遂溪案',
      details: '这是一个整顿贪官污吏的故事，-起来看看怎么个事吧',
      id: '2',
    },
    {
      src: lei3,
      title: '雷州义盗-明珠案',
      details: '这是一个整顿贪官污吏的故事，-起来看看怎么个事吧',
      id: '3',
    },
    {
      src: lei4,
      title: '雷州义盗-徐闻案',
      details: '这是一个打抱不平，行侠仗义的故事',
      id: '4',
    },
  ];
  const handList = [
    {
      src: guashuai,
      title: '经典古装雷剧：',
      works: '《挂帅》',
      id: '1',
      details:
        '简介:描写宋代巾帼英雄梁红玉为抗击金兵、严明军纪、执法如山、劝夫明义、斩子报国的感人故事。金山大捷，韩志忠骄傲轻敌，酒醉疏防，被金兵火烧战船，损失惨重。朝廷为做效尤，罢免韩世忠元帅之职，由梁红玉代任八个月元帅。梁红玉治军严明，韩世忠不服妻子管制。梁红玉以柔克刚，全军悦服。梁红玉的小儿子韩尚智中敌诡计，丢失粮草，梁红玉执法如山，欲忍痛斩子。副帅云山抢回粮草，全军同仇敌忾，奋勇杀敌',
    },
    {
      src: xueyan,
      title: '近代雷剧',
      works: '《血焰》',
      id: '2',
      details:
        '简介:讲述的是一九二七年前后发生在遂溪海山村的一段可歌可泣的革命故事。渔村女人黄玲氏含辛茹苦将三个孩子拉扯成人，自小教育他们长大要做一个顶天立地的男子汉，一定要将颠倒的不公平世界给颠倒过来。该剧获得',
    },
    // {
    //   src: peoOne,
    //   title: '雷剧小故事',
    //   details: '这是一个打抱不平，行侠仗义的故事',
    // },
    // {
    //   src: peoOne,
    //   title: '雷剧小故事',
    //   details: '这是一个打抱不平，行侠仗义的故事',
    // },
    // {
    //   src: peoOne,
    //   title: '雷剧小故事',
    //   details: '这是一个打抱不平，行侠仗义的故事',
    // },
    // {
    //   src: peoOne,
    //   title: '雷剧小故事',
    //   details: '这是一个打抱不平，行侠仗义的故事',
    // },
  ];
  // 雷剧小故事
  const toPage = (val: any) => {
    history.push({
      pathname: '/literature/story',
      query: {
        id: val.id,
      },
    });
  };
  const toPageWork = (val: any) => {
    history.push({
      pathname: '/literature/work',
      query: {
        id: val.id,
      },
    });
  };
  useEffect(() => {
    setTimeout(() => {
      setIsVisible(true);
    }, 1040);
  }, []);
  return (
    <div className="liter">
      <div className="banner">
        <img src={banner} alt="" />
      </div>
      <CSSTransition
        in={isVisible} // 控制动画是否开始，true 表示开始动画
        timeout={5000} // 动画过渡的时间，单位毫秒
        classNames="fade" // 指定动画的 class 名称
        unmountOnExit // 动画退出时卸载组件
      >
        <div className="handbills">
          <Title
            title={'雷剧剧本'}
            enTitle={'LeiJu screenplay'}
            className={'liter'}
          ></Title>

          <div className="handbills-content">
            {handList.map((val, index) => {
              return (
                <div className="hand-item" key={index}>
                  <div className="item-img">
                    <img src={val.src} alt="" />
                    <div className="item-title">
                      <div className="left">{val.title}</div>
                      <pre className="right">{val.works}</pre>
                    </div>
                  </div>
                  <div className="item-details">
                    <div className="item-details-content">{val.details}</div>
                    <div className="item-btn" onClick={() => toPageWork(val)}>
                      更多相关
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </CSSTransition>
      <div className="little-story">
        <Title
          title={'雷剧小故事'}
          enTitle={'LeiJu short story'}
          className={'liter'}
        ></Title>
        <div className="little-story-content">
          <div className="content-inst">
            {storyList.map((val) => {
              return (
                <div className="little-story-item">
                  <img src={val.src} alt="" />
                  <div className="little-story-item-title">{val.title}</div>
                  <div className="little-story-item-details">{val.details}</div>
                  <div
                    className="little-story-item-btn"
                    onClick={() => toPage(val)}
                  >
                    一起看看吧
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}
